
const cvs = document.querySelector('canvas');
const ctx = cvs.getContext('2d');

function randomNumber(min, max) {
  return Math.floor(Math.random() * (max + 1 - min) + min)
}

class Point {
  constructor() {
    this.r = 6;
    this.x = randomNumber(0, cvs.width - this.r / 2)
    this.y = randomNumber(0, cvs.height - this.r / 2)
    this.xSpeed = randomNumber(-50, 50);
    this.ySpeed = randomNumber(-50, 50);
    this.lastDrawTime = null;
  }
  draw() {
    if (this.lastDrawTime) {
      const duration = (Date.now() - this.lastDrawTime) / 1000
      const xDis = this.xSpeed * duration, yDis = this.ySpeed * duration
      let newX = this.x + xDis;
      let newY = this.y + yDis;
      if (newX > cvs.width - this.r / 2) {
        newX = cvs.width - this.r / 2
        this.xSpeed = -this.xSpeed
      } else if (newX < 0) {
        newX = 0
        this.xSpeed = -this.xSpeed
      }

      if (newY > cvs.height - this.r / 2) {
        newY = cvs.height - this.r / 2
        this.ySpeed = -this.ySpeed
      } else if (newY < 0) {
        newY = 0
        this.ySpeed = -this.ySpeed
      }

      this.x = newX;
      this.y = newY;
    }
    ctx.beginPath();
    ctx.arc(this.x, this.y, 6, 0, 2 * Math.PI, false)
    ctx.fillStyle = 'rgba(200,200,200,0.8)'
    ctx.fill()
    this.lastDrawTime = Date.now()
  }
}


class Graph {
  constructor(pointNum = 30, maxDis = 300) {
    this.init()
    this.points = new Array(pointNum).fill(0).map(() => new Point())
    this.maxDis = maxDis
    this.requestId = null
  }
  init() {
    cvs.width = window.innerWidth * devicePixelRatio
    cvs.height = window.innerHeight * devicePixelRatio
  }

  clear() {
    ctx.clearRect(0, 0, cvs.width, cvs.height)
  }
  reDraw() {
    this.requestId && cancelAnimationFrame(this.requestId)
    this.init()
    this.draw()
  }
  draw() {
    this.requestId = requestAnimationFrame(() => {
      this.draw()
    })
    this.clear()
    for (let i = 0; i < this.points.length; i++) {
      const p1 = this.points[i]
      p1.draw()
      for (let j = i + 1; j < this.points.length; j++) {
        const p2 = this.points[j]
        const d = Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2)
        if (d > this.maxDis) continue;
        ctx.beginPath()
        ctx.moveTo(p1.x, p1.y)
        ctx.lineTo(p2.x, p2.y)
        ctx.closePath()
        ctx.strokeStyle = `rgba(200,200,200, ${1 - d / this.maxDis})`
        ctx.stroke()
      }
    }
  }
}

function rgb() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  var rgb = '(' + r + ',' + g + ',' + b + ')';
  return rgb;
}

var getRandomColor = function(){
  return '#'+Math.floor(Math.random()*16777215).toString(16); 
}
class Text {
  constructor(text) {
    this.text = text;
  }
  draw() {
    ctx.font = "48px serif"
    // ctx.textAlign = "center"
    // const _text = ctx.measureText(this.text); // TextMetrics object
    // _text.width; // 16;
    // console.log(_text.width);
    // ctx.strokeStyle = 'pink'
    // ctx.fillText(this.text, ctx.width / 2, ctx.height / 2)
    ctx.textBaseline = 'middle'
    ctx.textAlign = 'center'

    const fix = ctx.measureText(this.text).actualBoundingBoxDescent / 2;
    // ctx.fillText(this.text, x, y + fix/2); 
    // ctx.strokeText(this.text, 100 ,100);
    ctx.fillStyle = getRandomColor()
    ctx.fillText(this.text, cvs.width / 2, 90 + fix / 2);
  }
}

const graph = new Graph()
graph.draw()



window.addEventListener('resize', () => {
  graph.reDraw()
})



